<template>
  <el-form-item class="edit-item edit-item-switch switch-normal">
    <slot name="label">
      <label style="line-height: 16px;">
        {{label}}
        <TooltipsCommon v-if="!!tooltips" :tooltips="tooltips"></TooltipsCommon>
      </label>
    </slot>

    <div style="flex: 1;">
      <el-switch
        style="min-height: 40px;"
        v-model="switchVal"
        active-color="#127BFF"
        inactive-color="#D5DCE6">
      </el-switch>
    </div>
  </el-form-item>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'SwitchNormal',
    props: ["label", "value", "modelValue", "boolReplace", "tooltips"],
    emits: ["change", "update:modelValue"],
    computed:{
      switchVal: {
        get() {
          // boolTrue ? boolFalse
          return this.boolReplace ? ( this.modelValue == this.boolReplace.boolTrue ) : this.modelValue;
        },
        set(val) {
          let newVal = this.boolReplace ? ( val ? this.boolReplace.boolTrue : this.boolReplace.boolFalse ) : val;
          this.$emit('update:modelValue', newVal)
          this.$emit('change', newVal);
        }
      }
    },
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('@/views/components/edit/comps/TooltipCommon.vue')),
    },
  }
</script>
